import { forwardRef, useImperativeHandle, useRef } from 'react'

import type {
  AssociationData,
  SwitchAndIntervalRef
} from '../../BigScreenBase/interface'
import AdministrativeAreaRanking from './AdministrativeAreaRanking'
import GovernanceDffectivenessAnalysis from './GovernanceDffectivenessAnalysis'

export type CenterProps = {
  selectedAssociationItem: AssociationData
}

const Center = forwardRef<SwitchAndIntervalRef, CenterProps>((props, ref) => {
  const { selectedAssociationItem } = props
  const DistrictRanCompRef = useRef<SwitchAndIntervalRef>(null)

  useImperativeHandle(ref, () => ({
    switchAssociation: (newAssociationId) => {
      DistrictRanCompRef.current?.switchAssociation(newAssociationId)
    },
    intervalRefresh: () => {}
  }))

  return (
    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 25 }}>
      <GovernanceDffectivenessAnalysis entId={selectedAssociationItem.key} />
      <AdministrativeAreaRanking
        ref={DistrictRanCompRef}
        selectedAssociationItem={selectedAssociationItem}
      />
    </div>
  )
})

export default Center
